<template>
	<view class="homePage">
		<view class="header">
			<view class="left">
				<image @click="backHome" src="../../static/images/home.png" mode="widthFix"></image>
			</view>
			<view class="right">
				<span style="font-size: 37px;">{{formattedTime}}</span>
				<span>{{nowDay}}</span>
			</view>
		</view>
		<view class="main">
			<view class="listbox">

				<view class="box">
					<view class="leftTop">
						<view class="texts">
							<span>工单号：</span>
							<span class="colorwhite">{{gongDan.dispatchno}}</span>
						</view>
						<view class="line">
							<image src="../../static/images/line.png" mode=""></image>
						</view>
						<view class="texts">
							<span>品名：</span>
							<span class="colorwhite">{{gongDan.itemname}}</span>
						</view>
						<view class="line">
							<image src="../../static/images/line.png" mode=""></image>
						</view>
						<view class="texts">
							<span>数量：</span>
							<span class="colorwhite">{{parseInt(gongDan.dispatchqty)}}</span>
						</view>
						<view class="line">
							<image src="../../static/images/line.png" mode=""></image>
						</view>
						<view class="texts">
							<span>工序：</span>
							<span class="colorwhite">{{gongDan.subname}}</span>
						</view>
						<view class="line">
							<image src="../../static/images/line.png" mode=""></image>
						</view>
						<!-- <view class="texts">
							<span>备注：</span>
							<span class="colorwhite">未知</span>
						</view> -->
						
						<view class="btns">
							<view @click="baogong">报工</view>
							<view style="background-color: #dd3e3e;" @click="over">结束</view>
						</view>
					</view>
					<view class="rightBox">
						<image class="zhixian" src="../../static/images/linezhi.png" mode=""></image>
						<view class="li">
							<view class="ewm">
								<tki-qrcode cid="1" :val="gongDan.dispatchno" :onval="true" :showLoading="false"
									:size="130" />
							</view>
							<view>工单号二维码</view>
						</view>
						<view class="li">
							<view class="ewm">
								<tki-qrcode cid="2" :val="gongDan.itemno" :onval="true" :showLoading="false"
									:size="130" />
							</view>
							<view>品号二维码</view>
						</view>
					</view>
				</view>


				<view class="box">
					<view class="leftBottom">
						<view class="title">
							<image src="../../static/images/error.png" mode="widthFix"></image>
							<span>注意:每2小时必须完成一次检验，否则设备将自动关机！！！</span>
						</view>
						<view class="line" style="margin-bottom: 10rpx;">
							<image src="../../static/images/line.png" class="lineImg"></image>
						</view>
						<view class="numlist">
							<view class="li">
								<span class="first"><i class="yuan"></i>首检</span>
								<span>100</span>
								<span>100</span>
								<span>100</span>
								<span>100</span>
							</view>
							<view class="li">
								<span class="first"><i class="yuan" style="background-color: #0DEE39;"></i>巡检</span>
								<span>100</span>
								<span>100</span>
								<span>100</span>
								<span>100</span>
							</view>
							<view class="li">
								<span class="first"><i class="yuan" style="background-color: #FF5E0D;"></i>未检</span>
								<span>100</span>
								<span>100</span>
								<span>100</span>
								<span>100</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listbox">
				<view class="bigBox">
					<view class="title">
						SOP管理
					</view>
					<view class="mainTable">
						<view class="imgs">
							<view @click="viewImg(index)" class="imgBox" v-for="(item,index) in imgList" :key="index">
								<image
									:src="item"
									mode="aspectFit"></image>
							</view>
						</view>
						<view class="line">
							<image src="../../static/images/line.png" mode=""></image>
						</view>
						<view class="twoTable">
							<view class="table">
								<view class="list">
									<span>机台编号：{{sopTable['machine_name']}}</span>
								</view>
								<view class="list">
									<span>当天产量：{{sopTable['产量']}}</span>
								</view>
								<view class="list">
									<span>工单产量：{{chanliang}}</span>
								</view>
								<view class="list">
									<span>程式编号：C0001</span>
								</view>
								<view class="list">
									<span>实时状态：{{sopTable['当前状态']}}</span>
								</view>
							</view>

							<view class="table">
								<view class="list">
									<span>运行时间：{{sopTable['运行']}}</span>
								</view>
								<view class="list">
									<span>待机时间：{{sopTable['待机']}}</span>
								</view>
								<view class="list">
									<span>报警时间：{{sopTable['报警']}}</span>
								</view>
								<view class="list">
									<span>关机时间：{{sopTable['离线']}}</span>
								</view>
								<view class="list">
									<span>OEE：{{sopTable['OEE']}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" >
			<view class="baogongBox">
				<view class="title">
					报工
				</view>
				<input type="number" v-model="qty" placeholder="请输入报工数量"/>
				
				<view class="btns">
					<view @click="sureBaoGong">确认报工</view>
					<view style="background-color: #dd3e3e;" @click="$refs.popup.close()">取消</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	var dayjs = require('dayjs')
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				topic: 'topic',
				nowDay: '',
				formattedTime: '00:00',
				timeer: null,
				itemno: '',
				id:'',
				sopTable: {},
				gongDan: {},
				chanliang:0,
				qty:'',
				imgList:['../../static/images/tuzhi1.png','../../static/images/tuzhi2.png']
			};
		},
		onLoad(e) {
			this.timeer = setInterval(() => {
				this.getTime()
				this.getNowDay()
			}, 1000)

			this.itemno = e.itemno
			this.id = e.id

			// 获取详情页
			this.getData()
			this.getGongDanInfo()
			this.getMachineToYield()
			
		},
		mounted() {
			// this.startConnect()
		},

		methods: {
			getData() {
				let data = {
					itemno: this.itemno,
					facilitycode: uni.getStorageSync('machineNo')
				}

				this.$api.getSbxx(data).then(res => {
					this.sopTable = res.result[1][0]
				})
			},
			getGongDanInfo() {
				let data = {
					id: this.id,
					facilitycode: uni.getStorageSync('machineNo')
				}

				this.$api.gettaskbill(data).then(res => {
					this.gongDan = res.result[0]
					console.log(this.gongDan)
				})
			},
			getMachineToYield() {
				let data = {
					id: this.id,
					facilitycode: uni.getStorageSync('machineNo')
				}

				this.$api.getMachineToYield(data).then(res => {
					console.log(res)
					this.chanliang = res.result
				})
			},
			getTime() {
				const now = new Date();

				const hours = ('0' + now.getHours()).slice(-2);
				const minutes = ('0' + now.getMinutes()).slice(-2);

				this.formattedTime = hours + ':' + minutes
			},
			// 显示右上角天
			getNowDay() {
				const weekday = dayjs().day();
				const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const hour = dayjs().hour()
				var str = ''
				if (hour >= 0 && hour < 12) {
					str = '上午';
				} else {
					str = '下午';
				}
				this.nowDay = dayjs().format('MM月DD日') + weekdays[weekday] + str
			},
			
			backHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 结束工单
			over(){
				uni.showModal({
					title: '提示',
					content: "是否确认结束？",
					success: (res) => {
						if (res.confirm) {
							let data = {
								id:this.id
							}
							this.$api.updateToEnd(data).then(res=>{
								this.$tip('操作成功')
								setTimeout(()=>{
									uni.navigateBack()
								},1500)
							})
						} 
					}
				})
			},
			baogong(){
				this.$refs.popup.open()
			},
			// MQTT
			startConnect() {
				let client = this.$mqtt.connect();
			
				client.on('connect', (res) => {
					console.log('连接成功');
					this.$mqtt.subscribe({
						topic: this.topic,
						qos: 0
					}).then((response) => {
						console.log("订阅响应", response);
					})
				}).on('reconnect', (res) => {
					console.log('重连', res);
				}).on('error', () => {
					console.log('报错');
				}).on('end', () => {
					console.log('断连');
				}).on('error', (error) => {
					console.log('连接失败...', error)
				}).on('end', () => {
					console.log('连接断开')
				}).on('message', (topic, message) => {
					//如果mqtt订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
					try {
						let data = JSON.parse(message)
			
						console.log('接收推送信息:', data)
					} catch (e) {
						console.log("Caught: " + e.message)
					}
				})
			
			},
			send() {
				let message = JSON.stringify('{true:1}')
				this.$mqtt.publish({
					topic: this.topic,
					message: message
				})
			},
			sureBaoGong(){
				if(this.qty == ''){
					return this.$tip('请输入报工数量')
				}
				
				let data = {
					dispatchNo:this.gongDan.dispatchno,
					subNo:this.gongDan.subno,
					qty:this.qty,
					facilitycode:uni.getStorageSync('machineNo'),
				}
				
				this.$api.putDispatch(data).then(res=>{
					this.$tip('报工成功')
					this.qty = ''
					this.$refs.popup.close()
					
					this.getGongDanInfo()
					this.getMachineToYield()
				})
				
				
			},
			viewImg(index){
				 uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.imgList // 需要预览的图片http链接列表
				  });
			}
		},
		onHide() {
			if (this.timeer) {
				clearInterval(this.timeer)
				this.timeer = null
			}
		},
		onUnload() {
			if (this.timeer) {
				clearInterval(this.timeer)
				this.timeer = null
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-image: url("../../static/images/loginbg.png");
		background-size: 100% 100%;
	}

	.homePage {
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 50rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.left {
				padding-left: 40rpx;

				image {
					width: 60rpx;
					height: auto;
				}
			}

			.right {
				span {
					color: #fff;
					margin-left: 30rpx;
					font-size: 36rpx;
				}
			}
		}

		.main {
			display: flex;
			justify-content: space-between;

			.listbox {
				width: 49%;

				.bigBox {
					height: 1320rpx;
					background-image: url('../../static/images/highbg.png');
					background-size: 100% 100%;
					box-sizing: border-box;

					.title {
						text-align: center;
						color: #fff;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.mainTable {
						box-sizing: border-box;
						padding: 40rpx;

						.imgs {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.imgBox {
								padding: 40rpx;
								background-color: #fff;
								width: 48%;
								height: 452rpx;
								box-sizing: border-box;
								border-radius: 10rpx;

								image {
									width: 100%;
									border-radius: 20rpx;
									height: 100%;
								}
							}

						}

						.line {
							margin: 10rpx 20rpx;

							image {
								width: 100%;
								height: 4rpx;
							}
						}

						.twoTable {
							display: flex;
							justify-content: space-between;
							margin-top: 40rpx;

							.table {
								width: 47%;
								border: 1px solid #0A4B86;
								border-radius: 10rpx;

								.list {
									height: 110rpx;
									display: flex;
									align-items: center;
									padding-left: 30rpx;
									color: #fff;
									background: rgba(41, 203, 226, 0.10);
								}

								.list:nth-child(even) {
									background: rgba(41, 203, 226, 0);
								}
							}
						}
					}
				}

				.box {
					height: 640rpx;
					background-image: url('../../static/images/colorbg.png');
					background-size: 100% 100%;
					display: flex;
					margin-bottom: 40rpx;

					.leftTop {
						box-sizing: border-box;
						padding: 60rpx;
						width: 65%;

						.texts {
							display: flex;
							align-items: center;
							padding: 10rpx 0;
							min-height: 80rpx;

							span {
								color: #29CBE2;
								font-size: 36rpx;
								display: block;
							}

							span:first-child {
								white-space: nowrap;
								min-width: 140rpx;
							}

							.colorwhite {
								color: #fff;
							}
						}
						
						.btns{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 30rpx;
							view{
								width: 45%;
								height: 80rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: #4caf66;
								color: #fff;
								border-radius: 10rpx;
							}
						}

						.line {
							image {
								width: 100%;
								height: 4rpx;
								display: block;
							}
						}
					}

					.rightBox {
						width: 35%;
						position: relative;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.zhixian {
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							height: 95%;
							width: 4rpx;
						}

						.li {
							color: #fff;
							margin-bottom: 30rpx;

							.ewm {
								background-color: #fff;
								padding: 18rpx;
								border-radius: 10rpx;

								image {
									width: 100%;
									height: auto;
								}
							}

							view {
								font-size: 28rpx;
								margin-top: 10rpx;
								text-align: center;
							}

						}
					}

					.leftBottom {
						padding: 40rpx;
						width: 100%;

						.title {
							display: flex;
							align-items: center;

							image {
								width: 50rpx;
								margin-right: 15rpx;
							}

							span {
								color: #fff;
								font-size: 30rpx;
							}
						}

						.lineImg {
							width: 100%;
							height: 4rpx;
						}
					}

					.numlist {
						padding: 20rpx;

						.li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							color: #fff;
							font-size: 30rpx;
							border: 1px solid #0384CF;
							border-radius: 10rpx;
							margin-bottom: 40rpx;

							span {
								width: 100%;
								display: flex;
								text-align: center;
								justify-content: center;
								padding: 30rpx 0;
								align-items: center;
								position: relative;
							}

							span::after {
								content: '';
								position: absolute;
								right: 0%;
								top: 50%;
								transform: translateY(-50%);
								width: 3rpx;
								height: 60rpx;
								background-image: url('../../static/images/smallline.png');
								background-size: 100% 100%;
							}

							span:last-child::after {
								display: none;
							}


							.yuan {
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								background-color: #11FFF0;
								margin-right: 20rpx;
							}

							.first {
								font-size: 32rpx;
							}
						}
					}
				}
			}
		}
	}
	
	.baogongBox{
		background-color: #fff;
		width: 800rpx;
		padding:10rpx 30rpx;
		border-radius: 10rpx;
		padding-bottom: 50rpx;
		.title{
			text-align: center;
			margin: 40rpx 0;
			font-size: 44rpx;
		}
		
		input{
			border: 1px solid #ccc;
			height: 100rpx;
			padding-left: 20rpx;
			border-radius: 10rpx;
		}
		
		
		.btns{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			view{
				width: 45%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #4caf66;
				color: #fff;
				border-radius: 10rpx;
			}
		}
		
	}
</style>